import React, { useRef, useState } from 'react';
import styles from './LeftTab.module.css';
import { Tabs } from 'antd';
import Batchdesignimages from '../../components/Batchdesign/Batchdesignimages/Batchdesignimages';
import Material from '../../components/Material/Material';
import TypefaceOne from '../../components/TypefaceOne/TypefaceOne';
import BackgroundStyle from '../../components/BackgroundStyle/BackgroundStyle';

type TabPosition = 'left' | 'right' | 'top' | 'bottom';

function LeftTab(props: any) {
    const [selectedColor, setSelectedColor] = useState<string | null>(null); // 管理选中的颜色
    const [drawerOpen, setDrawerOpen] = useState(false);
    const [tabPosition, setTabPosition] = useState<TabPosition>('left');
    const [showScrollbar, setShowScrollbar] = useState(false);
    const tabContentRef = useRef<HTMLDivElement | null>(null);
    const buttonRef = useRef<HTMLDivElement | null>(null);

    // 处理颜色变化
    const handleColorChange = (color: string) => {
        setSelectedColor(color); // 更新选中的颜色
        console.log(selectedColor, '1234r323432');
    };

    // 滚动处理函数
    const handleScroll = () => {
        // 根据实际滚动情况设置 showScrollbar
    };

    // 标签页名称数组
    const tabNames = ['上传', '模版', '素材', '文字', '图片', '背景', '组件', 'AI工具'];

    // 生成标签页内容
    const items = tabNames.map(name => ({
        label: name,
        key: name,
        children: (
            <div className={styles.tabContent}>
                <div className={styles.Batchdesignimages}>
                    {name === '上传' && <Material />}
                    {name === '模版' && <div>这里是模版内容2</div>}
                    {name === '素材' && <div>这里是模版内容3</div>}
                    {name === '文字' && <TypefaceOne />}
                    {name === '图片' && (
                        <div className={`${styles.Batchdesign} ${showScrollbar ? 'scrolling' : ''}`} ref={tabContentRef} onScroll={handleScroll}>
                            <Batchdesignimages />
                        </div>
                    )}
                    {name === '背景' && <BackgroundStyle onColorSelect={handleColorChange} />}
                    {name === '组件' && <div>这里是组件内容7</div>}
                    {name === 'AI工具' && <div>这里是AI工具内容</div>}
                </div>
            </div>
        ),
    }));

    // 切换抽屉状态
    const toggleDrawer = () => {
        setDrawerOpen(!drawerOpen);
        const tabContents = document.querySelectorAll(`.${styles.tabContent}`);
        tabContents.forEach(tabContent => {
            tabContent.style.transform = drawerOpen ? 'translateX(0)' : 'translateX(-400px)';
        });

        if (buttonRef.current) {
            buttonRef.current.style.transform = drawerOpen ? 'translateX(0)' : 'translateX(-330px)';
        }
    };

    return (
        <div className={styles.LeftTab}>
            <Tabs
                className={styles.tabs}
                tabPosition={tabPosition}
                items={items}
            />
            <div ref={buttonRef} onClick={toggleDrawer} className={styles.anniu}>
                |
            </div>
        </div>
    );
}

export default LeftTab;
